<template>
  <div class="container">
    <Category @categoryIdInfo="categoryIdInfo"></Category>
    <div class="content" v-show="scene === 0">
      <el-card>
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="!spuButtonFlag"
          style="margin-bottom: 20px"
          @click="addSpu"
          >添加SPU</el-button
        >
        <el-table :data="records" style="width: 100%" border>
          <el-table-column label="序号" type="index" width="180" align="center">
          </el-table-column>
          <el-table-column
            prop="spuName"
            label="spu名称"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="description"
            label="spu描述"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="prop"
            label="操作"
            width="width"
            align="center"
          >
            <template slot-scope="{ row, $index }">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="addSkuFrom(row)"
              ></el-button
              ><el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                @click="editSpuFrom(row)"
              ></el-button>
              <el-button
                type="info"
                icon="el-icon-info"
                size="mini"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteSpu(row)"
                size="mini"
              ></el-button
            ></template>
          </el-table-column>
        </el-table>
        <MyPagination
          :total="total"
          :currentPage="current"
          :pageSize="size"
          @update:current-page="current"
          @currentChange="currentChange"
        ></MyPagination>
      </el-card>
    </div>
    <div class="content" v-show="scene === 1">
      <el-card>
        <spu ref="spuFrom" @changeScene="changeScene"></spu>
      </el-card>
    </div>
    <div class="content" v-show="scene === 2">
      <el-card>
        <sku ref="skuFrom" @changeScene="changeScene"></sku>
      </el-card>
    </div>
  </div>
</template>

<script>
import Category from "@/components/Category/index.vue";
import MyPagination from "@/components/MyPagination/index.vue";
import spu from "./spuFrom/index.vue";
import sku from "./skuFrom/index.vue";
export default {
  name: "Spu",
  data() {
    return {
      page: 1,
      limit: 3,
      total: 1,
      current: 1,
      pages: 1,
      size: 1,
      records: [],
      spuInfo: {},
      scene: 0, //0显示spu列表，1显示spuFrom ，2显示SkuFrom
      categoryID: "",
    };
  },
  components: {
    Category,
    MyPagination,
    spu,
    sku,
  },
  mounted() {},
  methods: {
    categoryIdInfo(id) {
      // 收集三级id
      this.categoryID = id;
      let obj = {
        page: this.page,
        limit: this.limit,
        category3Id: id.category3Id,
      };
      this.spuInfo = obj;
      this.getSpuList(this.spuInfo);
    },
    // 获取spu
    async getSpuList(spuInfo) {
      let res = await this.$api.spu.getSpuList(spuInfo);
      if (res.code === 200) {
        this.total = res.data.total;
        this.current = res.data.current;
        this.pages = res.data.pages;
        this.size = res.data.size;
        this.records = res.data.records;
      }
    },
    // 页码改变
    currentChange(val) {
      //重新发送请求
      this.spuInfo.page = val;
      this.getSpuList(this.spuInfo);
    },
    //需改spuFrom
    editSpuFrom(row) {
      // 传递spu信息 通过ref调用子组件身上的方法
      this.$refs.spuFrom.getSpuInfo(row);
      // 显示spuFrom
      this.scene = 1;
    },
    changeScene(scene) {
      // 子组件通知父组件关闭
      this.scene = scene;
      //重新请求sku数据
      this.getSpuList(this.spuInfo);
    },
    async deleteSpu(row) {
      let res = await this.$api.spu.deleteSpu(row.id);
      if (res.code === 200) {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getSpuList(this.spuInfo);
      }
    },
    addSpu() {
      this.scene = 1;
      // 通知子组件发请求
      this.$refs.spuFrom.getSpuInfo(this.spuInfo?.category3Id);
    },
    addSkuFrom(row) {
      this.scene = 2;
      // 通知子组件发请求
      this.$refs.skuFrom.getSkuFromData(this.categoryID, row);
    },
  },
  computed: {
    spuButtonFlag() {
      return this.spuInfo.category3Id ? true : false;
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  margin: 20px;
  .content {
    margin-top: 20px;
  }
}
</style>